import VueRouter from 'vue-router'

//1.定义路由组件
import Home from '../components/Home';
import HomeA from '../components/HomeA';
import HomeB from '../components/HomeB';

import Bar from '../components/Bar';
import Foo from '../components/Foo';
import User from '../components/User';
import UserName from '../components/UserName';
import UserProfile from '../components/UserProfile';
import UserPosts from '../components/UserPosts';
import UserHome from '../components/UserHome';
import UserSettings from '../components/UserSettings';
import UserEmailsSubscriptions  from '../components/UserEmailsSubscriptions';
import UserProfilePreview from '../components/UserProfilePreview';
import CA from '../components/CA';
import Robot from '../components/Robot';
import Promotion from '../components/Promotion';
import SearchUser from '../components/SearchUser';

//2.定义路由
// 每一个路由应该映射一个组件
// 其中component可以是通过Vue.extend创建的组件构造器
// 或者，只是一个组件配置对象

const routes = [
    { 
        path: '/',
        meta: {
            requireAuth: true,
        },
        components: {
            default: Home,
            homeA: HomeA,
            homeB: HomeB,
        },
    },
    { 
        path: '/bar',
        //redirect: '/foo',
        //redirect: { name: 'foo'},
        redirect: () => {
            return '/foo'
        },
        component: Bar,
    },
    { 
        path: '/foo',
        name: 'foo',
        component: Foo
    },
    //动态路径参数，以冒号开头
    { 
        path: '/user',
        name: 'user',
        component: User,
        children: [
            {
                path: 'profile',
                component: UserProfile,
            },
            {
                path: 'posts',
                component: UserPosts,
            },
            {
                path: '',
                component: UserHome,
            }
        ]
    },
    { path: '/user/:username/post/:postId',component: UserName },
    {
        path: '/settings',
        component: UserSettings,
        children: [
            {
                path: 'emails',
                component: UserEmailsSubscriptions,
            },
            {
                path: 'profile',
                components: {
                    default: UserProfile,
                    helper: UserProfilePreview,
                }
            }
        ]
    },
    {
        path: '/a',
        component: CA,
        alias: '/b',
    },
    {
        path: '/robot/:id',
        props: true,
        beforeEnter: (to,from,next)=> {
            console.log('---beforeEnter---');
            console.log('to',to);
            console.log('from',from);
            next();
        },
        component: Robot,
    },
    {
        path: '/promotion/:from-newsletter',
        props: {
            newsletterPopup: true
        },
        component: Promotion,
    },
    {
        path: '/search',
        component: SearchUser,
        props: (router) => {
            console.log('router',router);
            return {
                query: router.query.searchId,
            }
        }
    },
    { path: '*'}
]
//创建路由实例，然后传routes配置
const routers = new VueRouter({
    routes,
    //mode: 'history',
    scrollBehavior() {
        //to,from,savedPosition
        //return 期望滚动到的哪个位置
        return { x: 0,y: 0}
    }
})

//全局前置守卫
//你可以通过routers.beforeEach注册一个全局前置守卫
//当一个导航触发时，全局前置守卫按照创建顺序调用。
//守卫是异步解析执行，此时导航在所有守卫resolve完成之前一直处于等待中。

routers.beforeEach((to,from,next)=>{
    console.log('---beforeEach---');
    //路由元信息
    console.log('to.matched',to.matched);
    let variable;
    variable = to.matched.some((record)=>{
        return record.meta.requireAuth;
    })
    if(variable) {
        console.log(111111);
    }
    console.log(to);
    console.log(from);
    //console.log(next);
    if (to.matched.some(record => record.meta.requiresAuth)) {
        console.log('1111')
    }
    next();
    //next('/user');

    next(false); //中断当前的导航
    //next('/foo')
})

routers.onError((err)=>{
    console.log('onError',err);
})

//全局解析守卫
//用router.beforeResolve注册一个全局守卫。
//这和router.beforeEach类似,区别在于导航被确认之前，
//同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

//全局后置钩子
routers.afterEach((to, from)=> {
    console.log('---afterEach---');
    console.log('to',to);
    console.log('from',from);
    //不会接受next函数也不会改变导航本身
})

//路由独享的守卫






export default routers;
